<!--
  @文件名： floorCom
  @来源：YongPing.Wang|2023/11/19 14:38
  @描述：
-->
<template>
  <div class="floorCom LG-wh100" :class="[platformMenuOpen ? 'floorComOpen' : 'floorComClose']">
    <el-icon v-if="platformMenuOpen" @click="changeMenuOpen(false)"><Fold /></el-icon>
    <el-icon v-else @click="changeMenuOpen(true)"><Expand /></el-icon>
  </div>
</template>

<script setup lang="ts">
  import { Expand, Fold } from '@element-plus/icons-vue'
  import { layoutInfo } from '@/store/layoutInfo.ts'
  import { ref } from 'vue'

  const layoutInfoStore = layoutInfo()
  const platformMenuOpen = ref<boolean>(layoutInfoStore.platformMenuOpen)
  // 修改布局 菜单展开收缩
  const changeMenuOpen = (type: boolean): void => {
    platformMenuOpen.value = type
    layoutInfoStore.setPlatformMenuOpen(type)
  }
</script>

<style scoped lang="scss">
  .floorCom {
    display: flex;
    align-items: center;
    font-size: 18px;
    color: var(--LG-layout-floor-color);
    cursor: pointer;
  }
  .floorComOpen {
    padding: 0 10px;
  }
  .floorComClose {
    justify-content: center;
  }
</style>
